<!-- 蓝色登录页面2 -->
<template>
	<view>
		<u-toast ref="uToast" />
		<view class="img-a">
			 <view class="t-b">
				您好，
				<br />
				欢迎使用{{appSystemName}}
			</view> 
		</view>
		<view class="login-view">
			<view class="t-login">
				<form class="cl">
					<!-- <view class="icon"><u-icon size="60" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view> -->
				      <button @getphonenumber="weChatLogin"  open-type="getPhoneNumber" :disabled="isloginBtnDisable" :loading="isloginBtnDisable">
						 <text>微信授权登录</text>
					 </button> 
					 <view style="display: flex; flex-direction: row; align-items: center; margin-top:20px">
						 <view style="width: 22px;">	 
							<u-radio-group  v-model="radioGroupValue"  @change="radioGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
														<u-radio shape="circle" :name="agreePrivatg" @change="radioChange"></u-radio>
							</u-radio-group>	 
						 </view>
						 <view class="hint"  style="font-size: 13px; font-weight: bolder;">
						 	 打钩表示您已阅读并同意以下协议<text class="link" style="color: #2979ff;" @click="linkToPrivacy">《平台隐私政策》</text>
						 </view>
					 </view>
				</form>
			</view>
			<u-mask :show="isShowLoading">
			    <view style="display: flex;justify-content: center;align-items: center;height: 100%;">
			        <u-loading mode="flower" size="90" />
			    </view>
			</u-mask>
		</view>
		</view> 
	</view>
</template>
<script>
import addSubHouse from '@/components/zy/addSubHouse.vue' 
import config from '@/common/config.js'
export default {
	data() {
		return {
			// username: '',
			// password: '',
			isShowLoading:false,
			username: '18720989281',
			password: '123456',
			isAgreePrivateTg:false,
			radioCheckWidth: 'auto',
			radioCheckWrap: false,
			radioGroupValue: '',//当前 radioGroup 选中的值
			radioValue:'', // 当前 radio 的值
			agreePrivatg:'1',
			num: 0 ,//用于区分是否是重复选中
			appSystemName:config.appSystemName,
			isloginBtnDisable:false,
		}
	},
	// onLoad() {
	// 	// 在页面中定义激励视频广告
	// 	let videoAd = null
	// 	// 在页面onLoad回调事件中创建激励视频广告实例
	// 	if (wx.createRewardedVideoAd) {
	// 	  videoAd = wx.createRewardedVideoAd({
	// 	    adUnitId: 'adunit-8cd5789a01a51891'
	// 	  })
	// 	  videoAd.onLoad(() => {})
	// 	  videoAd.onError((err) => {})
	// 	  videoAd.onClose((res) => {})
	// 	}
	// 	// 用户触发广告后，显示激励视频广告
	// 	if (videoAd) {
	// 	  videoAd.show().catch(() => {
	// 	    // 失败重试
	// 	    videoAd.load()
	// 	      .then(() => videoAd.show())
	// 	      .catch(err => {
	// 	        console.log('激励视频 广告显示失败')
	// 	      })
	// 	  })
	// 	}
	// },
	onLoad: () => {
		//this.appSystemName = config.appSystemName;
	},
	methods: {
		radioGroupChange(n) {
			if(n == this.radioValue && this.num == 0){
			  // 第一次相等即执行以下代码
			  this.num++
			}else {
			  // 第一次后相等即执行以下代码
			  // 置空 radioGroupValue 即取消选中的值
			   this.radioGroupValue = ''
			   // 初始化 num
			   this.num = 0
			}
		},
		 // 当切换其他选项的时候此方法才会执行
	    radioChange(n) {
	 	 this.radioValue = n
		 // 切换选项后需要初始化 num
		 this.num = 0
	    },
		//跳转到隐私政策界面
		linkToPrivacy(){
			uni.navigateTo({
				url:'/pages/content/privacyPolicy'
			});
		},
		login() {
			if(!this.$u.test.mobile(this.username)){
				return this.$refs.uToast.show({
					title: '手机号不正确',
					type: 'warning',
				})
			}
			if(!this.password){
				return this.$refs.uToast.show({
					title: '密码不能为空',
					type: 'warning',
				})
			}
			// 登录json参数，不同于表单参数
			let url = "/api/thirdLogin";
			this.$u.post(url,{
				username: this.username,
				password: this.password
			}).then(data => {
				// 登录成功初始化token与用户信息
				this.$u.vuex('vuex_token', data.token);
				this.$u.vuex('vuex_user', data.loginUser);
				uni.switchTab({
					url: '/pages/index/index'
				})
			});
		},
		/* 微信小程序登录 */
		weChatLogin(e){
			let isSelect = this.radioGroupValue;
			if(isSelect=="" || isSelect==null){
				this.$mytip.toast('请勾选隐私协议');
				return;
			}
			this.isShowLoading=true;
			this.isloginBtnDisable=true;
			let phoneCode= e.detail.code;
			let that=this;
			uni.login({
				success(res) {
					if(res.code){
					    let loginCode = res.code;
						let url ="/api/miniWxApi/getPhoneNum?code="+phoneCode;
						that.$u.get(url).then(res => {
							let phoneNum = res.phoneNum;
							let weChatUrl = "/api/weChatLogin";
							that.$u.post(weChatUrl,{
								username: phoneNum,
								code: loginCode,
							}).then(data => {
								that.isShowLoading=false;
								this.isloginBtnDisable=false;
								uni.hideLoading();
								// 登录成功初始化token与用户信息
								that.$u.vuex('vuex_token', data.token);
								that.$u.vuex('vuex_user', data.loginUser);
								uni.switchTab({
									url: '/pages/index/index'
								})
							});
						});
					}else{
						this.isShowLoading=true;
						this.isloginBtnDisable=true;
			 	        that.$mytip.toast('登录失败,请重试!');
			        }
				},
				fail() {
					 this.isShowLoading=true;
					 this.isloginBtnDisable=true;
					 console.log("登录失败,请重试!");
				}
			});
		},
		reg(){
			this.$u.route({
				url: 'pages/login/account'
			})
		}
	}
};
</script>


<style>
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 450rpx;
	background-image: url(
);
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: relative;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 10rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.buttom {
	.loginType {
		display: flex;
		padding: 140rpx 0;
		justify-content:center;
		
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: $u-tips-color;
			font-size: 22rpx;
		}
	}
	
	.hint {
		//position: absolute;
		//bottom: 0;
		//padding: 20rpx 40rpx;
		font-size: 12rpx;
		color: $u-tips-color;
		
		.link {
			color: #2979ff;
		}
	}
}

.clearBtn{
	margin:0;
	padding: 0;
	line-height: 1;
	background-color: #FFFFFF;
}

.clearBtn::after{
	position: unset !important;
	border: unset;
}
</style>
